﻿<template>
  <el-container class="index-container">
    <el-header class="index-header">
      <!-- 系统头 -->
      <div class="sys-title-content bgc-class">
        <div>Vue管理系统</div>
        <div class="exit bgc-class">
          <img
            @click="exitSys"
            class="exit-svg pointer-class"
            src="@/assets/img/index/exit.svg"
            alt
          />
          <div class="exit-text pointer-class" @click="exitSys">退出</div>
        </div>
      </div>

      <!-- router导航菜单 -->
      <div class="sys-menu-list">
        <div
          :class="[
            $route.path == menu.path ? 'menu-active' : '',
            'menu',
            'pointer-class',
          ]"
          v-for="menu in menuList"
          :key="menu.path"
          @click="toMenu(menu)"
        >
          <img
            :src="$route.path == menu.path ? menu.imgSrc1 : menu.imgSrc0"
            alt
          />
          <span>{{ menu.name }}</span>
        </div>
      </div>
    </el-header>

    <!-- router对应页面 -->
    <el-main class="index-main">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          name: "状态控制",
          path: "/StatusMonitor",
          imgSrc0: require("../../assets/img/navigationbar/状态监控-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/状态监控-icon/选中.png"),
        },
        {
          name: "运行控制",
          path: "/RunControl",
          imgSrc0: require("../../assets/img/navigationbar/运行控制-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/运行控制-icon/选中.png"),
        },
        {
          name: "报警",
          path: "/CallPolice",
          imgSrc0: require("../../assets/img/navigationbar/报警-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/报警-icon/选中.png"),
        },
        {
          name: "档案袋",
          path: "/Seop",
          imgSrc0: require("../../assets/img/navigationbar/SEOP-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/SEOP-icon/选中.png"),
        },
        {
          name: "计算控制",
          path: "/TeachTemplate",
          imgSrc0: require("../../assets/img/navigationbar/教控台-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/教控台-icon/选中.png"),
        },
        {
          name: "仪表盘",
          path: "/ControlTemplate",
          imgSrc0: require("../../assets/img/navigationbar/控制台-icon/未选中.png"),
          imgSrc1: require("../../assets/img/navigationbar/控制台-icon/选中.png"),
        },
      ],
    }
  },

  methods: {
    exitSys() {
      this.$message.success("exit")
    },

    toMenu(menu) {
      this.$router.push(menu.path)
    },
  },
}
</script>

<style lang="less" scoped>
.index-container {
  height: 100vh;
  .bgc-class {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .pointer-class {
    cursor: pointer;
  }
  .index-header {
    display: flex;
    flex-direction: column;

    height: auto !important;
    padding: 0;

    .sys-title-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-image: url("../../assets/img/index/statuscard.png");
      height: 77px;
      padding-left: 20px;
      .sys-title {
        width: 29.8%;
        height: auto;
      }
      @media screen and (max-width: 1440px) {
        .sys-title {
          width: 31%;
          height: auto;
        }
      }
      .exit {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-family: "思源R";
        width: 192px;
        height: 75px;
        font-size: 20px;
        padding-right: 20px;
        background-image: url("../../assets/img/index/exitcard.png");
        color: #fff;
        .exit-svg {
          height: 26px;
          width: 26px;
        }
        .exit-text {
          padding-left: 10px;
        }
      }
    }

    .sys-menu-list {
      height: 90px;
      font-size: 18px;
      font-family: "思源R";
      //   background: rgb(221, 216, 217);
      display: flex;
      justify-content: space-around;
      align-items: center;
      .menu {
        padding: 5px 0;
        width: 16%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px,
          rgba(0, 0, 0, 0.04) 0px 0px 6px;
        img {
          width: 45px;
          height: 45px;
          margin-right: 10px;
        }
      }

      .menu-active {
        color: #fff;
        background-color: #085fb1;
      }
    }
  }

  .index-main {
    padding: 0;
    height: calc(100vh - 167px);
    overflow: auto;
  }
}
</style>
